<template>
  <div class="category-filter-container">
    <!-- Filter Header with Toggle -->
    <div class="filter-header" @click="toggleFilters">
      <div class="header-content">
        <div class="header-left">
          <i class="fas fa-filter header-icon"></i>
          <h3 class="header-title">筛选条件</h3>
          <span class="filter-count" v-if="activeFilterCount > 0">{{ activeFilterCount }}</span>
        </div>
        <div class="header-right">
          <button v-if="hasActiveFilters && isExpanded" class="clear-all-mini" @click.stop="clearAllFilters">
            <i class="fas fa-times"></i>
          </button>
          <i :class="['toggle-icon', 'fas', isExpanded ? 'fa-chevron-up' : 'fa-chevron-down']"></i>
        </div>
      </div>

      <!-- Compact Active Filters Preview (when collapsed) -->
      <div class="compact-filters" v-if="!isExpanded && hasActiveFilters">
        <div class="compact-tags">
          <span v-if="filterValue.templateStyle" class="compact-tag">
            {{ getStyleLabel(filterValue.templateStyle) }}
          </span>
          <span v-if="filterValue.templateUse" class="compact-tag">
            {{ filterValue.templateUse }}
          </span>
          <span v-if="filterValue.templateIndustry" class="compact-tag">
            {{ filterValue.templateIndustry }}
          </span>
          <span v-if="filterValue.templatePost" class="compact-tag">
            {{ filterValue.templatePost }}
          </span>
        </div>
      </div>
    </div>

    <!-- Collapsible Filter Content -->
    <transition name="filter-expand">
      <div class="filter-content" v-show="isExpanded">
        <div class="filter-section">
          <!-- Template Style Filter -->
          <div class="filter-group">
            <div class="filter-label">
              <i class="fas fa-palette"></i>
              <span>风格</span>
            </div>
            <div class="filter-options">
              <button
                  :class="['filter-chip', 'all-chip', { active: !filterValue.templateStyle }]"
                  @click="filterValue.templateStyle = ''"
              >
                全部
              </button>
              <button
                  v-for="(item, index) in categoryList"
                  :key="index"
                  :class="['filter-chip', { active: filterValue.templateStyle === item.value }]"
                  @click="handleSelectStyle(item)"
              >
                {{ item.label }}
              </button>
            </div>
          </div>

          <!-- Template Use Filter -->
          <div class="filter-group">
            <div class="filter-label">
              <i class="fas fa-briefcase"></i>
              <span>用途</span>
            </div>
            <div class="filter-options">
              <button
                  :class="['filter-chip', 'all-chip', { active: !filterValue.templateUse }]"
                  @click="filterValue.templateUse = ''"
              >
                全部
              </button>
              <button
                  v-for="(item, index) in templateUseList"
                  :key="index"
                  :class="['filter-chip', { active: filterValue.templateUse === item.label }]"
                  @click="handleSelectUse(item)"
              >
                {{ item.label }}
              </button>
            </div>
          </div>

          <!-- Industry Filter -->
          <div class="filter-group">
            <div class="filter-label">
              <i class="fas fa-industry"></i>
              <span>行业</span>
            </div>
            <div class="filter-options">
              <button
                  :class="['filter-chip', 'all-chip', { active: !filterValue.templateIndustry }]"
                  @click="templateIndustryClick"
              >
                全部
              </button>
              <button
                  v-for="(item, index) in templateIndustryList"
                  :key="index"
                  :class="['filter-chip', { active: filterValue.templateIndustry === item.label }]"
                  @click="handleSelectIndustry(item)"
              >
                {{ item.label }}
              </button>
            </div>
          </div>

          <!-- Profession Filter -->
          <div class="filter-group">
            <div class="filter-label">
              <i class="fas fa-user-tie"></i>
              <span>职业</span>
            </div>
            <div class="filter-options">
              <button
                  :class="['filter-chip', 'all-chip', { active: !filterValue.templatePost }]"
                  @click="filterValue.templatePost = ''"
              >
                全部
              </button>
              <button
                  v-for="(item, index) in templatePostListCP"
                  :key="index"
                  :class="['filter-chip', { active: filterValue.templatePost === item }]"
                  @click="handleSelectTemplatePost(item)"
              >
                {{ item }}
              </button>
            </div>
          </div>
        </div>

        <!-- Expanded Active Filters Summary -->
        <div class="active-filters" v-if="hasActiveFilters">
          <span class="active-filters-label">已选择:</span>
          <div class="active-filter-tags">
            <span v-if="filterValue.templateStyle" class="active-tag">
              {{ getStyleLabel(filterValue.templateStyle) }}
              <i class="fas fa-times" @click="filterValue.templateStyle = ''"></i>
            </span>
            <span v-if="filterValue.templateUse" class="active-tag">
              {{ filterValue.templateUse }}
              <i class="fas fa-times" @click="filterValue.templateUse = ''"></i>
            </span>
            <span v-if="filterValue.templateIndustry" class="active-tag">
              {{ filterValue.templateIndustry }}
              <i class="fas fa-times" @click="templateIndustryClick"></i>
            </span>
            <span v-if="filterValue.templatePost" class="active-tag">
              {{ filterValue.templatePost }}
              <i class="fas fa-times" @click="filterValue.templatePost = ''"></i>
            </span>
          </div>
          <button class="clear-all-btn" @click="clearAllFilters">
            <i class="fas fa-trash-alt"></i> 清空筛选
          </button>
        </div>
      </div>
    </transition>
  </div>
</template>

<script setup lang="ts">
import {getTemplateStyleList} from "@/http/m_api/template";
import {
  templateUseList,
  templateIndustryList,
  templatePostList
} from '@/dictionary/createTemplate';
import {ElMessage} from "element-plus";
import { reactive, ref, computed, watch, onMounted } from 'vue';
import { useRoute } from 'vue-router';

const emit = defineEmits(['categoryChange']);

// Collapse/Expand state
const isExpanded = ref(false);

const filterValue = reactive<any>({
  templateStyle: '',
  templateUse: '',
  templateIndustry: '',
  templatePost: ''
});

// Initialize filters from route query
const route = useRoute();

// Get template styles from API
const categoryList = ref<any>([]);
const defaultIndustryList = ref<any>([
  '前端开发',
  '广告设计',
  '内容运营',
  '产品经理',
  '新媒体运营'
]);
const templatePostListCP = computed(() => {
  if (filterValue.templateIndustry) {
    const filter: any = templatePostList.find(
        (item: any) => item.title === filterValue.templateIndustry
    );
    return filter?.job || defaultIndustryList.value;
  } else {
    return defaultIndustryList.value;
  }
});
const hasActiveFilters = computed(() => {
  return filterValue.templateStyle ||
      filterValue.templateUse ||
      filterValue.templateIndustry ||
      filterValue.templatePost;
});
const activeFilterCount = computed(() => {
  let count = 0;
  if (filterValue.templateStyle) count++;
  if (filterValue.templateUse) count++;
  if (filterValue.templateIndustry) count++;
  if (filterValue.templatePost) count++;
  return count;
});

// Get style label by value
const getStyleLabel = (value: string) => {
  const style = categoryList.value.find((item: any) => item.value === value);
  return style?.label || value;
};

// Toggle filters visibility
const toggleFilters = () => {
  isExpanded.value = !isExpanded.value;
};

// Filter handlers
const handleSelectStyle = (item: any) => {
  filterValue.templateStyle = filterValue.templateStyle === item.value ? '' : item.value;
};

const handleSelectUse = (item: any) => {
  filterValue.templateUse = filterValue.templateUse === item.label ? '' : item.label;
};

const handleSelectIndustry = (item: any) => {
  if (filterValue.templateIndustry === item.label) {
    filterValue.templateIndustry = '';
    filterValue.templatePost = '';
  } else {
    filterValue.templateIndustry = item.label;
    filterValue.templatePost = '';
  }
};

const templateIndustryClick = () => {
  filterValue.templatePost = '';
  filterValue.templateIndustry = '';
};

const handleSelectTemplatePost = (item: any) => {
  filterValue.templatePost = filterValue.templatePost === item ? '' : item;
};

const clearAllFilters = () => {
  filterValue.templateStyle = '';
  filterValue.templateUse = '';
  filterValue.templateIndustry = '';
  filterValue.templatePost = '';
};

const getCategoryList = async () => {
  const data = await getTemplateStyleList();
  if (data.code === 0) {
    categoryList.value = data.data.map(
        (item: { id: string; label: string }) => {
          return {
            label: item.label,
            value: item.id
          };
        }
    );
  } else {
    ElMessage.error(data.message);
  }
};

onMounted(() => {
  const {templateStyle, templateUse, templateIndustry, templatePost} = route.query;
  filterValue.templateStyle = templateStyle || '';
  filterValue.templateUse = templateUse;
  filterValue.templateIndustry = templateIndustry;
  filterValue.templatePost = templatePost;

  // Auto-expand if there are active filters on load
  if (filterValue.templateStyle || filterValue.templateUse || filterValue.templateIndustry || filterValue.templatePost) {
    isExpanded.value = true;
  }
  getCategoryList();
})

// Watch for filter changes
watch(
    () => filterValue,
    () => {
      emit('categoryChange');
    },
    {deep: true}
);

defineExpose({
  filterValue
});
</script>

<style lang="scss" scoped>
@import 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css';

.category-filter-container {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.9));
  backdrop-filter: blur(10px);
  border: 1px solid rgba(100, 181, 246, 0.15);
  border-radius: 12px;
  margin: 20px 0;
  box-shadow: 0 4px 20px rgba(100, 181, 246, 0.08);
  transition: all 0.3s ease;
  overflow: hidden;

  &:hover {
    box-shadow: 0 8px 30px rgba(100, 181, 246, 0.12);
    border-color: rgba(100, 181, 246, 0.25);
  }
}

.filter-header {
  padding: 16px 20px;
  cursor: pointer;
  user-select: none;
  transition: all 0.3s ease;

  &:hover {
    background: rgba(100, 181, 246, 0.03);
  }

  .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .header-left {
      display: flex;
      align-items: center;
      gap: 12px;

      .header-icon {
        color: #64b5f6;
        font-size: 1.1rem;
      }

      .header-title {
        font-size: 1.1rem;
        font-weight: 600;
        color: #2c3e50;
        margin: 0;
      }

      .filter-count {
        background: linear-gradient(135deg, #64b5f6, #42a5f5);
        color: white;
        border-radius: 12px;
        padding: 2px 8px;
        font-size: 0.75rem;
        font-weight: 600;
        min-width: 20px;
        text-align: center;
        animation: pulse 2s infinite;
      }
    }

    .header-right {
      display: flex;
      align-items: center;
      gap: 10px;

      .clear-all-mini {
        background: linear-gradient(135deg, #e74c3c, #c0392b);
        border: none;
        border-radius: 50%;
        width: 24px;
        height: 24px;
        color: white;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;

        &:hover {
          transform: scale(1.1);
          box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3);
        }

        i {
          font-size: 0.7rem;
        }
      }

      .toggle-icon {
        color: #5a6c7d;
        font-size: 1rem;
        transition: all 0.3s ease;
      }
    }
  }

  .compact-filters {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(100, 181, 246, 0.1);

    .compact-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;

      .compact-tag {
        background: linear-gradient(135deg, rgba(100, 181, 246, 0.1), rgba(144, 202, 249, 0.05));
        border: 1px solid rgba(100, 181, 246, 0.2);
        border-radius: 12px;
        padding: 3px 8px;
        font-size: 0.75rem;
        color: #2c3e50;
        font-weight: 500;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}

.filter-content {
  padding: 0 20px 20px;
}

.filter-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 15px;
  min-height: 40px;

  .filter-label {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 80px;
    font-weight: 600;
    color: #2c3e50;
    font-size: 0.95rem;

    i {
      color: #64b5f6;
      font-size: 1rem;
    }
  }

  .filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1;
  }
}

.filter-chip {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(100, 181, 246, 0.2);
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 0.85rem;
  font-weight: 500;
  color: #5a6c7d;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  user-select: none;
  outline: none;
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(100, 181, 246, 0.1), transparent);
    transition: left 0.5s ease;
  }

  &:hover {
    background: rgba(100, 181, 246, 0.05);
    border-color: rgba(100, 181, 246, 0.3);
    color: #2c3e50;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(100, 181, 246, 0.15);

    &::before {
      left: 100%;
    }
  }

  &.active {
    background: linear-gradient(135deg, #64b5f6, #42a5f5);
    border-color: #64b5f6;
    color: white;
    box-shadow: 0 4px 12px rgba(100, 181, 246, 0.3);
    transform: translateY(-1px);

    &:hover {
      background: linear-gradient(135deg, #42a5f5, #1976d2);
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(100, 181, 246, 0.4);
    }
  }

  &.all-chip {
    background: rgba(108, 117, 125, 0.1);
    border-color: rgba(108, 117, 125, 0.2);
    color: #6c757d;

    &:hover {
      background: rgba(108, 117, 125, 0.15);
      border-color: rgba(108, 117, 125, 0.3);
      color: #495057;
    }

    &.active {
      background: linear-gradient(135deg, #6c757d, #495057);
      border-color: #6c757d;
      color: white;

      &:hover {
        background: linear-gradient(135deg, #495057, #343a40);
      }
    }
  }
}

.active-filters {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(100, 181, 246, 0.15);
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;

  .active-filters-label {
    font-weight: 600;
    color: #2c3e50;
    font-size: 0.9rem;
    white-space: nowrap;
  }

  .active-filter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1;
  }

  .active-tag {
    background: linear-gradient(135deg, rgba(100, 181, 246, 0.1), rgba(144, 202, 249, 0.05));
    border: 1px solid rgba(100, 181, 246, 0.3);
    border-radius: 16px;
    padding: 4px 12px;
    font-size: 0.8rem;
    color: #2c3e50;
    display: flex;
    align-items: center;
    gap: 6px;
    animation: slideInScale 0.3s ease-out;

    i {
      color: #64b5f6;
      cursor: pointer;
      font-size: 0.7rem;
      padding: 2px;
      border-radius: 50%;
      transition: all 0.2s ease;

      &:hover {
        background: rgba(100, 181, 246, 0.2);
        color: #2c3e50;
      }
    }
  }

  .clear-all-btn {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    border: none;
    border-radius: 16px;
    padding: 6px 12px;
    font-size: 0.8rem;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;

    &:hover {
      background: linear-gradient(135deg, #c0392b, #a93226);
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
    }

    i {
      font-size: 0.7rem;
    }
  }
}

// Transition animations
.filter-expand-enter-active,
.filter-expand-leave-active {
  transition: all 0.3s ease;
  overflow: hidden;
}

.filter-expand-enter-from,
.filter-expand-leave-to {
  max-height: 0;
  opacity: 0;
  transform: translateY(-10px);
}

.filter-expand-enter-to,
.filter-expand-leave-from {
  max-height: 500px;
  opacity: 1;
  transform: translateY(0);
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@keyframes slideInScale {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

// Responsive design
@media (max-width: 768px) {
  .category-filter-container {
    margin: 15px 0;
  }

  .filter-header {
    padding: 12px 15px;

    .header-content .header-left {
      gap: 8px;

      .header-title {
        font-size: 1rem;
      }
    }
  }

  .filter-content {
    padding: 0 15px 15px;
  }

  .filter-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;

    .filter-label {
      min-width: auto;
      width: 100%;
      justify-content: flex-start;
    }

    .filter-options {
      width: 100%;
    }
  }

  .filter-chip {
    font-size: 0.8rem;
    padding: 5px 12px;
  }

  .active-filters {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;

    .active-filter-tags {
      width: 100%;
    }

    .clear-all-btn {
      align-self: flex-end;
    }
  }

  .compact-filters .compact-tags .compact-tag {
    max-width: 100px;
  }
}

@media (max-width: 480px) {
  .filter-section {
    gap: 12px;
  }

  .filter-chip {
    font-size: 0.75rem;
    padding: 4px 10px;
  }

  .active-tag {
    font-size: 0.75rem;
    padding: 3px 10px;
  }

  .compact-filters .compact-tags .compact-tag {
    max-width: 80px;
  }
}
</style>